<template>
  <div>
    <!-- <WangEditor v-model="htmlStr"/>
        {{ htmlStr }} -->

    <el-dialog
      v-model="isShow"
      :title="operateType === 'add' ? '新增信息' : '更新信息'"
      destroy-on-close
    >
      <Organize
      uploadtype="fmlogo"
        :operateType="operateType"
        :form="operateForm"
        ref="form"
        :inline="true"
      />
      <div slot="footer" id="buttone" class="dialog-footer">
        <el-button class="userbtn" @click="isShow = false">取消</el-button>
        <el-button class="userbtn" type="primary" @click="confirm"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <div class="manage-header">
      <el-button type="primary" @click="addUser">新增</el-button>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label-width="50px" label="详情">
          <el-input
            v-model="search"
            size="default"
            placeholder="请输入关键信息"
            @keypress.enter="filterTableData"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="filterTableData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="tablebox">
      <el-table
        :data="listdata.slice((page - 1) * limit, page * limit)"
        style="width: 100%"
      >
        <el-table-column fixed prop="id" label="id" width="70" />
        <el-table-column fixed prop="user_id" label="用户id" width="70" />
        <el-table-column prop="Release_title" label="标题" width="220" />
        <el-table-column prop="Release_user" label="用户" />
        <el-table-column prop="party_lifes" label="信息" width="120">
          <template #default="scope">
            <div
              class="party_lifes"
              v-dompurify-html="scope.row.party_lifes"
            ></div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="picture" label="封面缩略图" width="220">
          <template #default="scope">
            <el-popover placement="right" :width="100" title="" trigger="hover">
              <img
                :src="scope.row.Release_logo"
                style="width: 125px; height: 120px"
              />
              <template #reference>
                <img
                  slots="reference"
                  :src="scope.row.Release_logo"
                  style="width: 30px; height: 30px"
                />
              </template>
            </el-popover>
          </template>
        </el-table-column> -->
        <el-table-column prop="created_At" label="新增时间" width="150" />
        <el-table-column prop="updated_At" label="更新时间" width="150" />
        <el-table-column fixed="right" label="编辑" width="150">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="large"
              @click="edituser(scope.$index, scope.row)"
            >
              <el-icon><Edit /></el-icon> 修改
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="deleteruser(scope.$index, scope.row)"
            >
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :currentPage="page"
        :page-size="limit"
        :page-sizes="[5, 10]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="TableDatatoal"
        @size-change="handleSizeChange"
        @current-change="CurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  organicreate,
  organallilist,
  organaupdate,
  organaremove,
} from "@/request/orgnization";
const list = reactive({
  listdata: [],
  operateType: "",
  isShow: false,
  editdata: [],
  limit: 5,
  page: 1,
  operateForm: {
    id: "",
    user_id: 1,
    Release_user: "",
    Release_title: "",
    party_lifes: "",
    created_At: "",
    updated_At: "",
    Release_logo:""
  },
});

	// 二：定义与 ref 同名变量
	const from = ref <any> ()

let {
  listdata,
  operateType,
  isShow,
  editdata,
  operateForm,
  limit,
  page,
  //   opertateFormLabel,
  //   active,
} = toRefs(list);
const search = ref("");
// const htmlStr = ref("");
watch([() => search.value], () => {
  if (search.value == "") {
    getorgnilist();
  }
});
// 分页
const TableDatatoal = computed(() => {
  // 该函数的返回值就是计算属性的值
  return list.listdata.length;
});

let handleSizeChange = (val) => {
  list.limit = val;
};
let CurrentChange = (val) => {
  list.page = val;
};

const deleteruser = async (index, row) => {
  console.log(index, row);
  let { id } = row;
  await organaremove({ id }).then((res) => {
    console.log(res);
    let { code, message } = res;
    console.log(res);
    if (code === 200) {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    } else {
      ElMessage({
        message: message,
        type: "error",
      });
    }
    getorgnilist();
  });
};

// 用户名搜索
let filterTableData = (val) => {
  // console.log(typeof search.value);
  let arr = [];
  if (search.value) {
    arr = list.listdata.filter((data) => {
      return data.Release_title.indexOf(search.value.toString()) !== -1;
    });
  } else {
    arr = list.listdata;
  }
  // console.log(arr);
  list.listdata.length = arr.length;
  list.listdata = arr;
  // getuserlistinfo();
};

const getorgnilist = async () => {
  var totle = 0;
  let { result } = await organallilist();
  for (let i = 0; i < result.length; i++) {
    result[i].created_At = result[i].created_At?.slice(0, 10);
    result[i].updated_At = result[i].updated_At?.slice(0, 10);
    result[i].Release_logo = result[i].Release_logo
      ? "/api/static/" + result[i].Release_logo
      : "/api/static/default/default.png";
  }
  // console.log(result);
  list.listdata = result;
};

onMounted(() => {
  getorgnilist();
});

const edituser = (index, row) => {
  // console.log(index, row);
  list.operateType = "edit";
  list.editdata = row;
  list.operateForm = {
    id: row.id,
    user_id: row.user_id,
    Release_user: row.Release_user,
    Release_title: row.Release_title,
    party_lifes: row.party_lifes,
    created_At: row.created_At,
    updated_At: row.updated_At,
    Release_logo:row.Release_logo
  };
  list.isShow = true;
};

const addUser = () => {
  list.operateForm = {
    id: "",
    user_id: 1,
    Release_user: "",
    Release_title: "",
    party_lifes: "",
    created_At: "",
    updated_At: "",
    Release_logo:""
  };
  list.operateType = "add";
  list.isShow = true;
};

const confirm = async () => {
  // console.log(list.operateForm);
  let {
    id,
    user_id,
    Release_user,
    Release_title,
    party_lifes,
    created_At,
    updated_At,
  } = list.operateForm;
  if (list.operateType === "edit") {
    // await from.value.uploadimg();
    await organaupdate({
      id,
      user_id,
      Release_user,
      Release_title,
      party_lifes,
      created_At,
      updated_At,
    }).then((res) => {
      let { code, message } = res;
      console.log(res);
      if (code === 200) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: "用户修改失败" + "," + message,
          type: "error",
        });
      }
      list.isShow = false;
      getorgnilist();
    });
  } else {
    organicreate({
      id,
      user_id,
      Release_user,
      Release_title,
      party_lifes,
      created_At,
      updated_At,
    }).then((res) => {
      {
        console.log(res);

        let { code, message } = res;
        console.log(res);
        if (code === 200) {
          ElMessage({
            message: "发布成功",
            type: "success",
          });
        } else {
          ElMessage({
            message: message,
            type: "error",
          });
        }
        list.isShow = false;
        getorgnilist();
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.party_lifes {
  // width: 150px;
  // height: 32px;
  font-size: 14px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  // border: 1px solid black;
}
:deep(.el-dialog) {
  margin-top: 1%;
  width: 600px;
}
.manage-header {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
}
</style>
